import React, { useEffect, useState } from 'react';
import {
  Button,
  Dropdown,
  Menu,
  Tabs,
  Typography,
  Affix,
  Space,
} from '@arco-design/web-react';
import styles from './style/index.module.less';
import { useHistory } from 'react-router-dom';
import { useTabActions } from './useTabActions';
import { IconDown, IconList, IconPlus } from '@arco-design/web-react/icon';
import { routes } from '@/routes';
import useLocale from '@/utils/useLocale';
const TabPane = Tabs.TabPane;
const homePath = '/dashboard/workplace';
function App() {
  const history = useHistory();
  const locale = useLocale();
  const {
    switchTab,
    closeTab,
    closeAllOtherTabs,
    closeAllTabs,
    navTabbarInfo,
  } = useTabActions();

  useEffect(() => {
    switchTab(history.location.pathname);
    const unlisten = history.listen((location, action) => {
      if (action !== 'REPLACE') {
        switchTab(location.pathname);
      }
    });
    return () => unlisten();
  }, []);

  const handleAddTab = () => {
    switchTab(homePath);
    history.replace(homePath);
  };

  const handleSwitchTab = (key) => {
    switchTab(key);
    history.replace(key);
  };

  const handleDeleteTab = (key) => {
    const currentTab = closeTab(key);
    history.replace(currentTab.key);
  };

  const handleCloseAllOtherTab = (key) => {
    closeAllOtherTabs(key);
    history.replace(key);
  };

  return (
    <Affix offsetTop={60} className={styles['affix']}>
      <div className={styles.navtabbar}>
        <Tabs
          editable
          type="card-gutter"
          showAddButton
          activeTab={navTabbarInfo.activeKey}
          // onAddTab={handleAddTab}
          extra={
            <Space>
              <Dropdown
                trigger={['click']}
                droplist={
                  <Menu>
                    <Menu.Item
                      onClick={(event) => {
                        event.stopPropagation();
                        handleDeleteTab(navTabbarInfo.activeKey);
                      }}
                      key="1"
                    >
                      关闭当前标签
                    </Menu.Item>
                    <Menu.Item
                      key="2"
                      onClick={(event) => {
                        event.stopPropagation();
                        closeAllOtherTabs(navTabbarInfo.activeKey);
                      }}
                    >
                      关闭其他标签
                    </Menu.Item>
                    <Menu.Item
                      key="3"
                      onClick={(event) => {
                        event.stopPropagation();
                        handleCloseAllOtherTab(homePath);
                      }}
                    >
                      关闭所有标签
                    </Menu.Item>
                  </Menu>
                }
              >
                <Button type="text" style={{ color: 'var(--color-text-3)' }}>
                  <IconDown />
                </Button>
              </Dropdown>
            </Space>
          }
          onDeleteTab={handleDeleteTab}
          onClickTab={handleSwitchTab}
          addButton={
            <Dropdown
              trigger={['click']}
              droplist={
                <Menu
                  hasCollapseButton
                  onClickMenuItem={(_, openKeys) => {
                    handleSwitchTab('/' + _);
                  }}
                >
                  {routes.map((route) => {
                    return route.children ? (
                      <Menu.SubMenu
                        onClick={(event) => {
                          event.stopPropagation();
                        }}
                        key={route.key}
                        title={locale[route.name]}
                      >
                        {route.children.map((subRoute) => {
                          return (
                            <Menu.Item key={subRoute.key}>
                              {locale[subRoute.name]}
                            </Menu.Item>
                          );
                        })}
                      </Menu.SubMenu>
                    ) : (
                      <Menu.Item key={route.key}>
                        {locale[route.name]}
                      </Menu.Item>
                    );
                  })}
                </Menu>
              }
            >
              <div className="arco-tabs-add-icon">
                <span className="arco-icon-hover arco-tabs-add-icon-hover">
                  <IconPlus />
                </span>
              </div>
            </Dropdown>
          }
        >
          {[
            { key: homePath, title: '工作台' },
            ...navTabbarInfo.tabs.filter((e) => e.key !== homePath),
          ].map((x) => (
            <TabPane
              destroyOnHide
              key={x.key}
              closable={x.key !== homePath}
              title={
                <Dropdown
                  trigger={['contextMenu']}
                  droplist={
                    <Menu>
                      <Menu.Item
                        onClick={(event) => {
                          event.stopPropagation();
                          handleDeleteTab(x.key);
                        }}
                        key="1"
                      >
                        关闭当前标签
                      </Menu.Item>
                      <Menu.Item
                        key="2"
                        onClick={(event) => {
                          event.stopPropagation();
                          handleCloseAllOtherTab(x.key);
                        }}
                      >
                        关闭其他标签
                      </Menu.Item>
                    </Menu>
                  }
                >
                  {x.title}
                </Dropdown>
              }
            ></TabPane>
          ))}
        </Tabs>
      </div>
    </Affix>
  );
}

export default App;
